import { useState } from 'react'
// useToggle 在toggle 切换组件提供便利  
// ahooks hooks 函数库  
import { useToggle,useRequest } from 'ahooks'
import Mock from 'mockjs'

function App() {
  const [state, {toggle}] = useToggle()
  function getUsername() {
    return new Promise((resolve) => {
      setTimeout(() => {
        // 给随机的数据
        resolve(Mock.mock('@cname'))
      },5000)
    })
  }
  // 封装
  // getUsername 自己去请求数据  
  const { data,error,loading } = useRequest(getUsername);
  // useRequest
  if(error) {
    return <div>failed to load</div>
  }
  if(loading) {
    return <div>loading...</div>
  }
  return (
    <div className="App">
      {/* useTiggle */}
      {/* <p>Current Boolean:{String(state)}</p>
      <p>
        <button onClick={() => toggle()}>Toggle</button>
      </p> */}
      <p>UserName:{data}</p>
    </div>
  )
}

export default App
